<template>
    <div class="">
        <a-modal
            :title="formObj.title"
            :visible="editorVisible"
            :maskClosable="false"
            :closable="true"
            :destroyOnClose="true"
            width="100%"
            :dialog-style="{ margin: '0 auto' }"
            wrapClassName="notice-modal"
            @cancel="closeVisible">
            <div v-html="fggnr" v-if="formObj.type == 'view'"></div>
            <a-form-model
                v-else
                ref="ruleForm"
                :model="form"
                :rules="rules"
                :label-col="labelCol"
                :wrapper-col="wrapperCol"
            >
                <a-form-model-item label="公告标题" prop="fggbt">
                    <a-input v-model="form.fggbt"/>
                </a-form-model-item>
                <a-form-model-item label="是否置顶" prop="fsfzd">
                    <a-select v-model="form.fsfzd" default-value="2">
                        <a-select-option value="1">
                            是
                        </a-select-option>
                        <a-select-option value="2">
                            否
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item v-if="formObj.value" label="有效状态" prop="fyxzt">
                    <a-select v-model="form.fyxzt">
                        <a-select-option value="有效">
                            有效
                        </a-select-option>
                        <a-select-option value="无效">
                            无效
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="公告内容" prop="fggnr">
                    <quill-editor
                        v-model="form.fggnr"
                        ref="myQuillEditor"
                        :options="editorOption"
                        >
                        </quill-editor>
                </a-form-model-item>
            </a-form-model>
            <template slot="footer">
                <div v-if="formObj.type == 'view'">
                    <a-button @click="closeVisible">关闭</a-button>
                </div>
                <div v-else>
                    <a-button @click="closeVisible">取消</a-button>
                    <a-button @click="onSubmit" class="blue-btn">提交</a-button>
                </div>
            </template>
        </a-modal>
    </div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
import { queryById,addNotice,updateNotice,} from './service/index'
export default {
    props: {
        formObj: {
            type:[Array,Object],
            default: ()=>{},
            require: false
        }
    },
    data() {
        return {
            editorVisible: false,
            quillEditor: '',
            editorOption: {
                placeholder: '请在这里输入',
                modules: {
                    toolbar: [
                        ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
                        ['blockquote', 'code-block'], // 引用，代码块
                        [{ 'header': 1 }, { 'header': 2 }], // 标题，键值对的形式；1、2表示字体大小
                        [{ 'list': 'ordered' }, { 'list': 'bullet' }], // 列表
                        [{ 'script': 'sub' }, { 'script': 'super' }], // 上下标
                        [{ 'indent': '-1' }, { 'indent': '+1' }], // 缩进
                        [{ 'direction': 'rtl' }], // 文本方向
                        [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
                        [{ 'header': [1, 2, 3, 4, 5, 6, false] }], // 几级标题
                        [{ 'color': [] }, { 'background': [] }], // 字体颜色，字体背景颜色
                        [{ 'font': [false, 'heiti', 'songti', 'kaiti', 'lishu', 'arial', 'monospace'] }], // 字体
                        [{ 'align': [] }], // 对齐方式
                        ['clean'], // 清除字体样式
                        ['image', 'video'] // 上传图片、上传视频
                    ]
                }
            },
            labelCol: { span: 4 },
            wrapperCol: { span: 14 },
            kongForm: {},
            form: {
                id: '',
                fggbt: '',
                fsfzd: '2',
                fyxzt: undefined,
                fggnr: '',
            },
            fggnr: '',
            rules: {
                fggbt: [{ required: true, message: '请输入公告标题', trigger: 'blur' }],
                fsfzd: [{ required: true, message: '请选择是否置顶', trigger: 'change' }],
                fyxzt: [{ required: true, message: '请选择有效状态', trigger: 'change' }],
                fggnr: [{ required: true, message: '请输入公告内容', trigger: 'blur' }],
            }
        }
    },
    watch: {
        formObj(newval,oldVal){
            if(newval.value){
                this.form = {
                    ...newval.value
                }
            }
            if(newval.type == 'view'){
                this.getData()
            }
        }
    },
    mounted() {
        this.kongForm = JSON.parse(JSON.stringify(this.form))
    },
    methods: {
        closeVisible(){
            this.editorVisible = false
            this.form = {
                ...this.kongForm
            }
        },
        getData(){
            queryById({id:this.formObj.id}).then(res => {
                //console.log(res)
                this.fggnr = res.result.fggnr
            })
        },
        onSubmit(){
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    //console.log(this.form)
                    if(this.formObj.value){
                        let data = {
                            id: this.form.id,
                            fggbt: this.form.fggbt,
                            fsfzd: this.form.fsfzd,
                            fyxzt: this.form.fyxzt,
                            fggnr: this.form.fggnr
                        }
                        updateNotice(data).then(res => {
                            if(res.code == 200){
                                this.$message.success(res.message)
                                this.closeVisible()
                                this.$emit('success')
                            } else {
                                this.$message.warning(res.message)
                            }
                        })
                    } else {
                        let data = {
                            fggbt: this.form.fggbt,
                            fsfzd: this.form.fsfzd,
                            fggnr: this.form.fggnr
                        }
                        addNotice(data).then(res => {
                            if(res.code == 200){
                                this.$message.success(res.message)
                                this.closeVisible()
                                this.$emit('success')
                            } else {
                                this.$message.warning(res.message)
                            }
                        })
                    }
                } else {
                    //console.log('error submit!!');
                    return false;
                }
            });
        }
    }
}
</script>
<style lang="less">
.notice-modal {
    .ant-modal {
        background-color: #5ca3e5;
        position: static;
        width: 100%;
        height: 100%;
        top: 0 !important;
        padding-bottom: 0 !important;
        margin: 0 auto !important;
    }
    .ant-modal-content {
        height: 100%;
    }
    .ant-modal-body {
        height: calc(100vh - 110px);
        overflow: scroll;
    }
    .ant-modal-footer {
        text-align: center !important;
        .ant-btn-primary {
            background-color: #5ca3e5 !important;
            border-color: #5ca3e5 !important;
        }
    }
}

</style>
<style>
.ql-container {
    min-height: 300px !important;
    font-size: 16px !important;
    max-height: calc(100vh - 450px);
    overflow: scroll;
}
</style>
